<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <shopro-navbar :isBack="false">
            <text
                slot="content"
                style="color: #000; width: 100%; text-align: center;padding-left: 20rpx;font-size:30rpx"
                @click="userInfo.password?'':denglu()"
            >
                {{ '个人报表' }}
            </text>
        </shopro-navbar>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20 u-m-t-30">
            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">学校人数占比</view>
                        <view class="right-arrow"></view>
                    </view>
                    <!--                    <view class="u-flex u-flex-col u-row-left u-col-center" style="font-size:24rpx;border: 1rpx solid #2A6CFF;border-radius: 10rpx" @click="showriqi = true">-->
                    <!--                        <view class="time-day u-flex u-row-center">{{day}}</view>-->
                    <!--                        <view class="time-month u-flex u-row-center">{{month}}</view>-->
                    <!--                    </view>-->
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">

                    <view class="lenged u-flex u-flex-col">
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class="u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    3901
                                </view>
                                <view class="u-flex u-row-between timu">男生人数</view>
                            </view>
                        </view>
                        <view class="wancheng u-flex u-row-center u-col-top">
                            <view class="miaoshu">
                                <view class=" u-m-b-8 u-flex u-row-center" style="font-size: 28rpx;font-weight: bold">
                                    1909
                                </view>
                                <view class="u-flex timu u-row-between">女生人数</view>
                            </view>
                        </view>
                    </view>
                    <view class="chart-content" style="width: 100%;height: 200rpx">
                        <uni-ec-canvas class="uni-ec-canvas-nannv" id="uni-ec-canvas-nannv" ref="canvas_nannv" canvas-id="uni-ec-canvas-nannv" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>
            <!--            全校体测结果-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 yuangong-item u-col-top">
                <view class="u-flex u-col-center u-row-left u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">全校体测结果</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-if="myGroupList.length!=0" class="u-m-t-20 u-w-100s">
                    <view class="collect-list u-flex u-w-100s u-row-between collect-list-top u-p-t-20 u-p-b-20">
                        <view class="xuhao u-flex u-row-center">序号</view>
                        <view class="xuehao u-flex u-row-center">学生姓名(学籍号)</view>
                        <view class="isbangding u-flex u-row-center">是否绑定</view>
                        <view class="shouhuan u-flex u-row-center">绑定手环</view>
                    </view>
                    <view class="collect-list u-flex u-w-100s u-row-between u-p-t-20 u-p-b-20" v-for="(goods, index) in myGroupList" :key="index">
                        <view class="xuhao u-flex u-row-center">1</view>
                        <view class="xuehao u-flex u-row-center">张三(zs203120)</view>
                        <view class="isbangding u-flex u-row-center">否</view>
                        <view class="shouhuan u-flex u-row-center" v-if="goods.id">
                            手环标签(空)
                        </view>
                        <view class="shouhuan u-flex u-flex-col u-row-center u-col-center" v-if="!goods.id">
                            <view>手环标签</view>
                            <view style="color:#B5B5B5;">（MAC:0323432）</view>
                        </view>
                    </view>
                </view>

            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">院系合格占比</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 400rpx">
                        <uni-ec-canvas class="uni-ec-canvas-hegelv" id="uni-ec-canvas-hegelv" ref="canvas_hegelv" canvas-id="uni-ec-canvas-hegelv" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>

            <!--            报表-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item u-row-left u-col-top">
                <view class="u-flex u-col-center u-row-between u-w-50s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <view class="u-m-r-10 biaoshi"></view>
                        <view class="u-m-l-14" style="font-size: 24rpx">院系合格占比</view>
                        <view class="right-arrow"></view>
                    </view>
                </view>
                <view v-show="!showriqi" class="u-flex u-w-100s u-row-between top-yuangong u-p-t-20 u-p-b-20" style="position:relative;">
                    <view class="chart-content" style="width: 100%;height: 400rpx">
                        <uni-ec-canvas class="uni-ec-canvas-nvbar" id="uni-ec-canvas-nvbar" ref="canvas_nvbar" canvas-id="uni-ec-canvas-nvbar" :ec="ec">
                        </uni-ec-canvas>
                    </view>
                </view>
            </view>

            <u-calendar v-model="showriqi" :mode="mode" @change="changeDate"></u-calendar>
        </view>
    </view>
</template>

<script>

import {mapGetters} from 'vuex';
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
import * as echarts from 'echarts'

let chart = null
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            day        : "12",
            month      : "六月",
            ec         : {
                lazyLoad: true
            },
            showriqi   : false,
            mode       : 'date',
            homeData   : {},
            myGroupList: [],
            // 饼图
            nannvPieoptions: {
                series: [
                    {
                        name     : 'Access From',
                        type     : 'pie',
                        radius   : ['70%', '90%'],
                        center   : ['65%', '50%'],
                        roseType : 'radius',
                        labelLine: {
                            show: false
                        },
                        emphasis : {
                            label: {
                                show: false
                            }
                        },
                        itemStyle: {
                            borderRadius: 20
                        },
                        data     : [
                            {
                                value    : 35, name: '',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#31A4FF'
                                            },
                                            {
                                                offset: 1,
                                                color : '#2A6CFF'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                }
                            },
                            {
                                value    : 20, name: '',
                                itemStyle: {
                                    color       : {
                                        x         : 0,
                                        y         : 0,
                                        x2        : 0,
                                        y2        : 1,
                                        global    : false,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color : '#FEC737'
                                            },
                                            {
                                                offset: 1,
                                                color : '#FE8109'
                                            }
                                        ]
                                    },
                                    borderRadius: 15
                                },
                            }
                        ],
                        // 鼠标移上去的item不会凸出了
                        hoverAnimation: false,
                    }
                ]
            },
            labelOption    : {
                show     : true,
                position : 'inside',
                formatter: '{c}%',
                color    : '#fff'
            },
            //     常规饼图

            //    院系合格占比
            hegelvDataX    : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            hegelvData     : [

                {
                    name    : 'Baidu',
                    type    : 'bar',
                    stack   : 'Search Engine',
                    emphasis: {
                        focus: 'series'
                    },
                    label   : {
                        show     : true,
                        position : 'inside',
                        formatter: '{c}%',
                        color    : '#fff'
                    },
                    data    : [620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name    : 'Google',
                    type    : 'bar',
                    stack   : 'Search Engine',
                    label   : {
                        show     : true,
                        position : 'inside',
                        formatter: '{c}%',
                        color    : '#fff'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data    : [120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name    : 'Bing',
                    type    : 'bar',
                    stack   : 'Search Engine',
                    label   : {
                        show     : true,
                        position : 'inside',
                        formatter: '{c}%',
                        color    : '#fff'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data    : [60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name    : 'Others',
                    type    : 'bar',
                    stack   : 'Search Engine',
                    label   : {
                        show     : true,
                        position : 'inside',
                        formatter: '{c}%',
                        color    : '#fff'
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data    : [62, 82, 91, 84, 109, 110, 120]
                }
            ],
            yuanxi_avgsData: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
            ],
            currentPage    : 1,
            lastPage       : 1,
            total          : ''

        };
    },
    computed: {
        ...mapGetters(['isLogin', 'userInfo']),
        hegulvChartOption() {
            return {
                tooltip: {
                    trigger    : 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend : {
                    type: 'scroll',
                },
                grid   : {
                    top         : '15%',
                    left        : '3%',
                    right       : '4%',
                    bottom      : '-3%',
                    containLabel: true
                },
                xAxis  : [
                    {
                        type    : 'category',
                        data    : this.hegelvDataX,
                        axisLine: {
                            lineStyle: {color: '', width: 1, height: 1} // x轴
                        },
                    }
                ],
                yAxis  : [
                    {
                        type    : 'value',
                        axisLine: {
                            lineStyle: {color: 'rgb(215,217,217)', width: 0, height: 0} // y轴
                        },
                    }
                ],
                series : this.hegelvData
            }
        },
        //各院系平均分
        yuanxiPJChartOption() {
            return {
                grid   : {
                    top: '15%',
                },
                legend : {},
                tooltip: {
                    trigger    : 'axis',
                    showContent: false
                },
                color  : ['#ff0000', '#00ff00', '#0000ff', '#0ffff0'],
                dataset: {
                    source: this.yuanxi_avgsData
                },
                xAxis  : {type: 'category'},
                yAxis  : {gridIndex: 0},
                series : [
                    {
                        type          : 'line',
                        seriesLayoutBy: 'row',
                        emphasis      : {focus: 'series'},
                        label         : {
                            show    : true,
                            position: 'top',
                            color   : '#ff0000'
                        },
                    },
                    {
                        type          : 'line',
                        label         : {
                            show    : true,
                            position: 'top',
                            color   : '#00ff00'
                        },
                        seriesLayoutBy: 'row',
                        emphasis      : {focus: 'series'}
                    },
                    {
                        type          : 'line',
                        seriesLayoutBy: 'row',
                        emphasis      : {focus: 'series'},
                        label         : {
                            show    : true,
                            position: 'top',
                            color   : '#0000ff'
                        },
                    },
                    {
                        type          : 'line',
                        label         : {
                            show    : true,
                            position: 'top',
                            color   : '#00fff0'
                        },
                        seriesLayoutBy: 'row',
                        emphasis      : {focus: 'series'}
                    }
                ]
            }
        },
        shengaobarTop() {
            return {
                xAxis : {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis : {
                    type: 'value'
                },
                legend: {
                    data: [
                        '比例'
                    ]
                },
                series: [
                    {
                        label: {
                            show          : true,
                            position      : 'top',
                            valueAnimation: true
                        },
                        name : '比例',
                        data : [120, 200, 150, 80, 70, 110, 130],
                        type : 'bar'
                    }
                ]
            };
        }
    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad(options) {
        this.$refs.canvas_nannv.init(this.initNannvChart)
        console.log("=====this.hegulvChartOption", this.hegulvChartOption)
        this.$refs.canvas_hegelv.init(this.initChartShengaobar)
        this.$refs.canvas_nvbar.init(this.initChartyuanxiPJ)

        if (this.$Route.query.id) {
            uni.setStorageSync('fid', this.$Route.query.id);
        }
        this.init()
        this.getmyGroupList();
    },
    methods: {
        // 组织成员列表
        getmyGroupList() {
            let that = this;
            that.$http('login.staff', {
                group_id: that.userInfo.group_id,
                page    : that.currentPage,
                pagesize: 10
            }).then(res => {
                if (res.code === 1) {
                    that.myGroupList = [...that.myGroupList, ...res.data.data];
                    that.lastPage    = res.data.last_page;
                    this.total       = res.data.total
                }
            });
        },
        // 初始化
        init() {
            let day   = new Date().getDate();
            let month = new Date().getMonth() + 1;
            console.log("===day", day, month)
            this.day = day
            this.getmonth(month)
            this.initdata()
        },
        changeDate(e) {
            console.log("====e", e)
            this.day = e.day
            this.getmonth(e.month)
        },
        getmonth(month) {
            switch (month) {
                case 1 :
                    this.month = '一月'
                    break;
                case 2 :
                    this.month = '二月'
                    break
                case 3 :
                    this.month = '三月'
                    break
                case 4 :
                    this.month = '四月'
                    break
                case 5 :
                    this.month = '五月'
                    break
                case 6 :
                    this.month = '六月'
                    break
                case 7 :
                    this.month = '七月'
                    break
                case 8 :
                    this.month = '八月'
                    break;
                case 9 :
                    this.month = '九月'
                    break;
                case 10 :
                    this.month = '十月'
                    break;
                case 11 :
                    this.month = '十一月'
                    break;
                case 12 :
                    this.month = '十二月'
                    break;


            }
        },
        initNannvChart(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.nannvPieoptions)
            return chart
        },
        initChartShengaobar(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.shengaobarTop)
            return chart
        },
        initChartyuanxiPJ(canvas, width, height, canvasDpr) {
            console.log(canvas, width, height, canvasDpr)
            chart = echarts.init(canvas, null, {
                width           : width,
                height          : height,
                devicePixelRatio: canvasDpr
            })
            canvas.setChart(chart)
            chart.setOption(this.yuanxiPJChartOption)
            return chart
        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        initdata() {
            let that = this;
            that
                .$http(
                    "login.home",
                    {},
                    "加载中..."
                )
                .then(res => {
                    if (res.code === 1) {
                        this.homeData = res.data
                        // this.hegelvDataX = this.analysisData.hegelv.data
                        // this.hegelvData = this.analysisData.hegelv.series
                    }
                });
        },
        // 路由跳转
        jump(path, parmas) {
            console.log("====1111", path)
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
.uni-ec-canvas {
    width: 100%;
    height: 400rpx;
    display: block;
}

.uni-ec-canvas-bing {
    width: 100%;
    height: 200rpx;
    display: block;
}

.uni-ec-canvas-hegelv {
    width: 100%;
    height: 400rpx;
    display: block;
}

.home-wrap {
    background: #F5F5F5 !important;
}

.yuangong-item {
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
    border-radius: 20rpx;

    .topnum {
        font-size: 30rpx;
        margin-bottom: 10rpx;
    }

    .topname {
        font-size: 24rpx;
        color: #999999;
    }
}

.baobiao-item {
    background: #ffffff;
    border-radius: 30rpx;
    padding: 20rpx;

    .time-day {
        width: 100rpx;
        background: #2A6CFF;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        box-shadow: 0px 2px 4px 0px rgba(53, 110, 253, 0.05);
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}

.lenged {
    position: absolute;
    top: 16rpx;
    left: -22rpx;
    width: 26vw;
    padding: 10rpx 18rpx;

    .wancheng {
        width: 100%;

        .timu {
            color: #999;
        }
    }
}

::v-deep .u-drawer {
    z-index: 1110000 !important;
}

.u-h-100 {
    background: #3FA897;
    color: #fff;
    position: relative;

    .biaoshi {
        position: absolute;
        left: 0;
        bottom: -24rpx;
        width: 0px;
        height: 0px;
        border-top: 14rpx solid #067664;
        border-right: 14rpx solid #067664;
        border-bottom: 14rpx solid transparent;
        border-left: 14rpx solid transparent;
    }

    .right-arrow {
        position: absolute;
        right: 0;
        bottom: 0rpx;
        width: 0px;
        height: 0px;
        border-top: 40rpx solid #3FA897;
        border-right: 40rpx solid #fff;
        border-bottom: 40rpx solid #3FA897;
        border-left: 40rpx solid #3FA897;
    }
}
.collect-list{
    background: #fff;
    border-bottom: 1rpx solid #F5F5F5;
    .xuhao{
        width: 10%;
    }
    .xuehao{
        width: 35%;
    }
    .isbangding{
        width: 15%;
    }
    .shouhuan{
        width: 40%;
    }
}
.collect-list-top{
    background: #F5F5F5;
    color:#8E8E8E;
}

</style>
